const path = require('path')
// 导入在内存中生成 HTML 页面的 插件
// 只要是插件，都一定要 放到 plugins节点中去
// 自动在内存中根据指定页面生成一个内存的页面
// 自动，把打包好的bundle.js追加到页面中去
const HtmlWebpackPlugin = require('Html-webpack-plugin')
const webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
	mode: 'development',
	entry: {
		app: path.join(__dirname, './src/main.js')
	},
	output: {
		path: path.join(__dirname, 'dist'),
		filename: 'bundle.js'
	},
	devServer: {  //这里是配置 dev-server 命令参数的第二种行形式，相对来说，这种方式麻烦一点
		open: true,
		port: 4000,
		hot: true,
		contentBase: 'src'
	},
	plugins: [ 
		 new VueLoaderPlugin(),
		//配置插件的节点
		new webpack.HotModuleReplacementPlugin(),//一个热更新的 模块对象，这是启用热更新
		// new HtmlWebpackPlugin()
		
		new HtmlWebpackPlugin({ //创建一个 在内存中 生成HTMl  页面插件
			template: path.join(__dirname, './src/index.html'),

			filename: 'index.html'
		}),
	],
	module: {
		rules: [
			{ test:/\.css$/, use: ['style-loader', 'css-loader'] },
			{ test:/\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
			{ test:/\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
			{ test:/\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7624&name=[hash:8]-[name].[ext]' },
			// 处理图片路径的loader
			// limit 给定的值，是图片的大小，单位是byte，如果我们引用的图片，大于或等于给定limit值，则不会被转为base64格式的
			// 的字符串，如果图片小于给定的limit值，则会被转化为base64的字符串
			// name是表示在利用在页面查看图片时，会显示的图片的名字，前八位为hash后面为真名
			{ test:/\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader'} ,//处理字体的loader 
			{ test:/\.js$/, loader: 'babel-loader', exclude: /node_modules/,},//将es6不支持的语法转化成支持的语法
			{ test:/\.vue$/, loader: 'vue-loader'}
		]
	},
	resolve: {
		alias: { //修改Vue被导入时候的包的路径
			"vue$": 'vue/dist/vue.js'
		}
	}
}